
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代化响应式网页</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="font-sans bg-gray-50">
    <!-- 导航栏 -->
    <nav class="gradient-bg text-white shadow-lg">
        <div class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <div class="text-2xl font-bold">品牌LOGO</div>
                <div class="hidden md:flex space-x-8">
                    <a href="#" class="hover:text-gray-200">首页</a>
                    <a href="#" class="hover:text-gray-200">产品</a>
                    <a href="#" class="hover:text-gray-200">服务</a>
                    <a href="#" class="hover:text-gray-200">关于</a>
                    <a href="#" class="hover:text-gray-200">联系</a>
                </div>
                <button class="md:hidden focus:outline-none">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-6 py-8">
        <!-- 英雄区域 -->
        <section class="text-center py-12">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">欢迎来到我们的网站</h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">这是一个现代化响应式网页模板，适配各种设备屏幕尺寸</p>
            <div class="mt-8">
                <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full mr-4 transition duration-300">
                    主要按钮
                </button>
                <button class="border border-blue-600 text-blue-600 hover:bg-blue-50 font-bold py-3 px-6 rounded-full transition duration-300">
                    次要按钮
                </button>
            </div>
        </section>

        <!-- 功能卡片区 -->
        <section class="py-12">
            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">我们的特色</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="text-blue-600 mb-4">
                        <i class="fas fa-rocket text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-gray-800">高性能</h3>
                    <p class="text-gray-600">优化过的代码结构和资源加载策略，确保页面快速响应</p>
                </div>
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="text-green-600 mb-4">
                        <i class="fas fa-mobile-alt text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-gray-800">响应式</h3>
                    <p class="text-gray-600">完美适配从手机到桌面电脑的各种屏幕尺寸</p>
                </div>
                <div class="bg-white rounded-xl shadow-md p-6 card-hover">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-paint-brush text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2 text-gray-800">现代化设计</h3>
                    <p class="text-gray-600">采用最新的UI设计趋势，视觉效果出众</p>
                </div>
            </div>
        </section>

        <!-- 图片展示区 -->
        <section class="py-12">
            <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">作品展示</h2>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="overflow-hidden rounded-lg shadow-md">
                    <img src="https://picsum.photos/600/400?random=1" alt="项目示例图片1" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">项目标题1</h3>
                        <p class="text-gray-600">项目简短描述内容</p>
                    </div>
                </div>
                <div class="overflow-hidden rounded-lg shadow-md">
                    <img src="https://picsum.photos/600/400?random=2" alt="项目示例图片2" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">项目标题2</h3>
                        <p class="text-gray-600">项目简短描述内容</p>
                    </div>
                </div>
                <div class="overflow-hidden rounded-lg shadow-md">
                    <img src="https://picsum.photos/600/400?random=3" alt="项目示例图片3" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">项目标题3</h3>
                        <p class="text-gray-600">项目简短描述内容</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">关于我们</h3>
                    <p class="text-gray-400">公司简介和使命愿景的描述内容</p>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">产品</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">服务</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">联系方式</h3>
                    <address class="text-gray-400 not-italic">
                        <p><i class="fas fa-map-marker-alt mr-2"></i> 公司地址</p>
                        <p><i class="fas fa-phone mr-2"></i> 联系电话</p>
                        <p><i class="fas fa-envelope mr-2"></i> 电子邮箱</p>
                    </address>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4">社交媒体</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 公司名称. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // 简单的交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            // 移动端菜单切换
            const mobileMenuBtn = document.querySelector('.md-hide');
            if(mobileMenuBtn) {
                mobileMenuBtn.addEventListener('click', function() {
                    const menu = document.querySelector('.mobile-menu');
                    menu.classList.toggle('hidden');
                });
            }

            // 卡片悬停效果
            const cards = document.querySelectorAll('.card-hover');
            cards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-5px)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.transform = '';
                });
            });
        });
    </script>
</body>
</html>
